<template>
<div class="col-lg-12 control-section">
    <div id="action-description">
        <p>This sample demonstrates the default functionality of the Selection in Grid, which allows you to select row or cell through simple mouse down or keyboard interaction.</p>
    </div>
    <div>
        <ejs-grid :dataSource="data" :allowPaging='true' :allowSelection='true' :selectionSettings='selectOptions' :pageSettings='pageSettings'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column>
            </e-columns>
        </ejs-grid>
    </div>

     <div id="description">
        <p>
            Selection provides an interactive support to highlight the row or cell that you select. Selection can be done through a simple
            Mouse down or Keyboard interaction. To enable selection, set <code><a target="_blank" class="code"
        href="http://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#allowselection-boolean">
        allowSelection
        </a></code> as true.
        </p>
        <p>Grid component supports two types of selection which can be set using <code><a target="_blank" class="code"
        href="http://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#selectionsettings-selectionsettingsmodel">
        selectionSettings->type
        </a></code> property.
            They are,</p>
        <ul>
            <li><code>Single</code> - Enabled by default. Allows the user to select single row/cell at a time.</li>
            <li><code>Multiple</code> - Allows the user to select more than one row/cell at a time.</li>
        </ul>
        <p>Also, supports three modes of selection which can be set using <code><a target="_blank" class="code"
        href="http://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#selectionsettings-selectionsettingsmodel">
        selectionSettings->mode
        </a></code> property. They
            are,
        </p>
        <ul>
            <li><code>Row</code> - Enabled by default. Enables the row selection in Grid.</li>
            <li><code>Cell</code> - Enables the cell selection in Grid.</li>
            <li><code>Both</code> - Enables both the row and cell selection in Grid. Clicking any cell will select both the row and cell
                simultaneously
            </li>
        </ul>
        <p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells. To select range of rows/cells,
            hold <strong>SHIFT</strong> key and click the rows/cells.</p>
        <p>While using the Grid in a touch device environment, there is an option for multi-selection through a single tap on the
            row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single
            tap.
        </p>
        <p>In this demo, multiple row selection is enabled, click any row to select.</p>
        <p>
            More information on the selection configuration can be found in this
            <a target="_blank" href="http://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#selectionsettings-selectionsettingsmodel">documentation section</a>.
        </p>
    </div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./data-source";

Vue.use(GridPlugin);

export default Vue.extend({
  data: () => {
    return {
      data: data,
      selectOptions: { type: 'Multiple' },
      pageSettings: { pageCount: 5 }
    };
  },
  provide: {
      grid: [Page]
  }
});
</script>